<template>
    <div :id="id" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  type TitleComponentOption,
  ToolboxComponent,
  type ToolboxComponentOption,
  TooltipComponent,
  type TooltipComponentOption,
  LegendComponent,
  type LegendComponentOption,
  GridComponent,
  type GridComponentOption
} from 'echarts/components';
import { PieChart,type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
type EChartsOption = echarts.ComposeOption<
  GridComponentOption | PieSeriesOption | LegendComponentOption | TitleComponentOption
  |ToolboxComponentOption |TooltipComponentOption
>;
const props = defineProps({
    id: {
        type: String,
        default: "pie" 
    },
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById(props.id);
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            show: true,
            text: props.data.title,
            textStyle: {
                fontSize: 14,
                color: '#ffffff'
            },
            left: 15
        },
        grid: {
            top: 60,
            left: 20,
            right: 20,
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}占比 : {c}%',
            backgroundColor: '#02082c',
            borderColor: '#0e3c8b',
            borderWidth: 2,
            textStyle: { 
                color: 'blue',
                fontSize: 18,
                fontWeight: 600
            }
        },
        legend: {
            orient: 'vertical',
            top: 'center',
            right: 15,
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {color: '#fff'},
        },
        toolbox: {
            show: false,
            feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        series: [
            {
                type: 'pie',
                radius: [10, 50],
                center: ['40%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                labelLine: {
                    length: 5,
                    length2: 30
                },
                data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
